<template>
  <div style="border-bottom: 1px solid #e8e8e8;">
    <div id="editor-toolbar"></div>
  </div>
  <div id="content">
    <div id="editor-container">
      <div id="title-container">
        <input placeholder="Page title..." :value="article.title">
      </div>
      <div v-show="!isPreview" id="editor-text-area"></div>
      <div v-show="isPreview" id="editor-text-preview">
      </div>
    </div>
  </div>
  <el-affix position="bottom" :offset="5" style="text-align: center;">
    <el-button type="info" @click="$router.push({ path: '/article' })">返回</el-button>
    <el-button @click="previewDraft">{{ isPreview ? '返回编辑' : '保存预览' }}</el-button>
    <el-button type="primary" @click="saveDraft">存草稿</el-button>
    <el-button @click="insertArticle" type="success">提交</el-button>

  </el-affix>


  <el-dialog v-model="centerDialogVisible" title="插入图片" append-to-body fullscreen center top='0px' class="file-dialog">
    <FilesPage ref="insertImage" :config-option="configOption"></FilesPage>
    <el-button @click="getImage" type="primary">
      插入图片
    </el-button>
    <el-button @click="centerDialogVisible = false">
      取消
    </el-button>

  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, onUnmounted } from 'vue';
import FilesPage from '@/pages/files/index.vue';
import http from "@/utils/axios.js";
import { createThumbnail, createImageUrl } from "@/utils/image.js";
import { useRouter, useRoute } from 'vue-router';

import useDirStore from "@/stores/dir";
const dirStore = useDirStore();

let editor, toolbar, insertHandle;//编辑器，菜单，插入手柄
let editorTextPreview;//文本插入对象
const centerDialogVisible = ref(false);//图片选择器开关
const isPreview = ref(false);//预览开关
const configOption = reactive({ hasClose: true, hasUpload: false });//图片选择器配置
const insertImage = ref();//图片选择器引用
const article = reactive({id:undefined, title: '', path:undefined, content: '', dir_id: undefined })
const route = useRoute();
console.log( route.query.id)
// 存草稿
function saveDraft() {
  const html = editor.getHtml();
  editorTextPreview.innerHTML = html;
  article.content = html;
  localStorage.setItem('wangEditorDraft', html)
}
//预览草稿
function previewDraft() {
  saveDraft();
  isPreview.value = !isPreview.value;
}
//点击插入图片后将图片插入
function getImage() {
  centerDialogVisible.value = false;
  editor.focus();
  const arr = insertImage.value.getSelected();
  arr.forEach(item => {
    const src = createImageUrl(item);
    editor.dangerouslyInsertHtml(`<img src="${src}" style="width: 49%;">`)
  });  
}
//保存或插入文章
function insertArticle(){
  saveDraft();
  return http.post('app/pan/article/insert',article).then(res=>{
    console.log(res)
    const {id}=res;
    article.id=id;
  })
}
onMounted(() => {
  editorTextPreview = document.getElementById("editor-text-preview");
  const dir_id = route.query.dirId * 1;
  const clickDir = dirStore.dirList.find((item) => {
    return item.id === dir_id;
  }) || {};

  article.title = clickDir.title;
  article.path = route.query.path;
  article.dir_id = dir_id;

  const E = window.wangEditor
  // 切换语言
  const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
  E.i18nChangeLanguage(LANG)
  const html = localStorage.getItem('wangEditorDraft');
  const editorConfig = {
    placeholder: 'Type here...',
    scroll: false, // 禁止编辑器滚动
    MENU_CONF: {
      uploadImage: {
        customBrowseAndUpload(insertFn) {
          centerDialogVisible.value = true;
          //insertHandle = insertFn;
          nextTick().then(res => {
            insertImage.value.setClickDirID(dir_id)
          })
        }
      }
    }
  };
  // 先创建 editor
  editor = E.createEditor({
    selector: '#editor-text-area',
    html,
    config: editorConfig
  })

  // 创建 toolbar
  const toolbar = E.createToolbar({
    editor,
    selector: '#editor-toolbar',
    config: {
      excludeKeys: 'fullScreen',
    },
    mode: 'simple'
  })

 
})
</script>
<style >
.file-dialog .el-dialog__header {
  display: none;
}

.file-dialog .el-dialog__body {
  padding: 0px;
}


#editor-toolbar {
  width: 100vm;
  background-color: #FCFCFC;
  margin: 0 auto;
}

#content {
  height: calc(100vh - 41px - 32px);
  background-color: rgb(245, 245, 245);
  overflow-y: auto;
  position: relative;
}

#content::-webkit-scrollbar {
  width: 0px;
}

#editor-container {
  width: 850px;
  margin: 10px auto 10px auto;
  background-color: #fff;
  padding: 20px 50px 50px 50px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

#title-container {
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
}

#title-container input {
  font-size: 30px;
  border: 0;
  outline: none;
  width: 100%;
  line-height: 1;
}

#editor-text-area {
  text-align: left;
  min-height: 800px;
  margin-top: 10px;
}

#editor-text-preview {
  width: 600px;
  margin: 10px auto 10px auto;
}
</style>